import React from 'react';
import "./index.css";
import PaiStudyServer from '../../Server/PaiStudy/PaiStudyServer';

export default class ChapterCatalogue extends React.Component{
    constructor (props){
        super();
        this.state={
            active:props.active,
            leftIcon:props.leftIcon,
            chapter:props.chapter,
            catalogue:props.catalogue,
            rightIcon:props.rightIcon,
            curriculumId:props.curriculumId,
            Section:[]
        }
        this.GetData();
    }
    UNSAFE_componentWillReceiveProps(props){
        this.setState({
            active:props.active,
            leftIcon:props.leftIcon,
            chapter:props.chapter,
            catalogue:props.catalogue,
            rightIcon:props.rightIcon,
            curriculumId:props.curriculumId
        },()=>{
            this.GetData();
            // console.log(this.state.chapter)
        })
    }
    GetData(){
        PaiStudyServer.PaiStudyColumnSelectCurriculumSection(this.state.curriculumId)
        .then(response=>{
            let Section=[];
            response.data.forEach(element => {
                Section.push(
                    <div key={element.id} className="" style={{background:"#f4f5f9", paddingTop:"0.5rem",paddingBottom:"0.5rem",marginTop:"0.7rem"}}>
                        <div className="ChapterLeft">
                            {element.title}
                        </div>
                    </div>
                )
            });
            this.setState({
                Section
            });
            // console.log(response)
        })
    }
    // 章节目录
    render(){
        return(
            <div>
                <div className={this.state.active?"ChapterCatalogue_Body ChapterCatalogue_active":"ChapterCatalogue_Body"}>
                    <div className="ChapterCatalogue_Luck">
                        {this.state.leftIcon}
                    </div>
                    <div className="ChapterCatalogue_Chapter">
                        {this.state.chapter}
                    </div>
                    <div className="ChapterCatalogue_Catalogue">
                        {this.state.catalogue}
                    </div>
                    <div className="ChapterCatalogue_Icon">
                        {this.state.rightIcon}
                    </div>
                    
                </div>
                <div>
                    {this.state.Section}
                </div>
            </div>
            
        );
    }
}